// 新增评论表单
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {notLogin, post, eventEmitter} from '../../common/js/utils'
import {Form, message, Input, Button, Comment, Avatar} from 'antd'
import {withRouter} from 'react-router-dom'
import {Emoji, selectText} from './emoji'
import propTypes from 'prop-types'
import './comment_form.scss'

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

@Form.create()
@connect(mapStateToProps)
@withRouter
class NewComment extends Component {

  state = {
    submitLoading: false
  }

  onSubmit = e => {
    e.preventDefault()
    const content = this.props.form.getFieldValue('comment')
    const {userInfo} = this.props
    if (!content) return
    if (userInfo.get('status') !== 1) {
      notLogin()
      return
    }
    post('/api/movies/addComment', {
      _id: this.props._id,
      comment: content
    }, submitLoading => {
      this.setState({submitLoading})
    }).then(res => {
      if (res.result === 1) {
        message.success('发布成功')
        this.props.form.resetFields()
        this.props.onSubmit && this.props.onSubmit(Object.assign(res.data, {
          createdBy: userInfo.toJS(),
          replies: [],
          good_count: 0,
          reply_count: 0
        }))
      }
    })
  }

  onSelect = (emoji) => {
    const {getFieldValue, setFieldsValue} = this.props.form
    const input = document.getElementById('comment')
    const content = getFieldValue('comment') || ''
    setFieldsValue({
      comment: selectText(input, content, emoji)
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const {userInfo, history} = this.props
    const nickname = userInfo.get('nickname')
    return (
      <Comment
        className="comment-input-content"
        avatar={
          nickname ?
            <Avatar
              src={userInfo.get('face')}
              alt={userInfo.get('nickname')}
              title={userInfo.get('nickname')}
              onClick={e => history.push('/user')}
            /> :
            <Avatar
              icon="user"
              title="未登录"
              onClick={e => eventEmitter.emit('login')}
            />
        }
        content={
          <Form onSubmit={this.onSubmit}>
            <Form.Item style={{
              marginBottom: 10
            }}>
              {
                getFieldDecorator('comment')(
                  <Input.TextArea
                    placeholder="请输入你的评论..."
                    style={{
                      height: 80
                    }}
                  />
                )
              }
            </Form.Item>
            <div className="comment-submit">
              <Emoji
                onSelect={this.onSelect}
                placement="right"
              />
              <Button className="btn" type="primary" htmlType="submit" loading={this.state.submitLoading}>发表评论</Button>
            </div>
          </Form>
        }
      />
    )
  }
}

NewComment.propTypes = {
  _id: propTypes.string
}

export {NewComment}
